import React from 'react';
import { connect } from 'dva';
import styles from './index.less';
import { routerRedux } from 'dva/router';
import { ActivityIndicator, NavBar, Icon, List, Checkbox } from 'antd-mobile';

const Item = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
class index extends React.Component {
  constructor(props) {
    super(props);
  }
  onQuery = (item) => {
    const { dispatch } = this.props;
    const { deptName, deptNum } = item;
    dispatch({
      type: 'contacts/query',
      payload: { code: deptNum },
    });
  };
  onChange = (item) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'detail/selectItem',
      payload: { item },
    });
    dispatch({
      type: 'contacts/selectItem',
      payload: { item },
    });
  };
  onConfirm = () => {
    const { dispatch, contacts } = this.props;
    const { index } = contacts;
    dispatch({
      type: 'contacts/onConfirm',
    });
    dispatch(
      routerRedux.push({
        pathname: '/detail',
      }),
    );
  };
  render() {
    const { detail, contacts, dispatch } = this.props;
    const { deptData, perData, index, allPer, loading, selectP } = contacts;
    const { flowUser, personList, selectList } = detail;
    return (
      <div className={styles.container}>
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          leftContent="返回"
          onLeftClick={() => {
            dispatch({
              type: 'detail/hide',
              payload: {
                close: false,
              },
            });
            if (index < 1) {
              dispatch({
                type: 'detail/showView',
              });
              dispatch(
                routerRedux.push({
                  pathname: '/detail',
                }),
              );
            } else {
              dispatch({
                type: 'contacts/backView',
                payload: { index },
              });
              dispatch({
                type: 'detail/backView',
                payload: {selectP },
              });
            }
          }}
          rightContent={[
            <div
              style={{
                marginRight: 5,
                border: '1px solid #fff',
                paddingTop: 2,
                paddingBottom: 2,
                paddingLeft: 10,
                paddingRight: 10,
                borderRadius: 5,
              }}
              onClick={() => {
                this.onConfirm();
              }}
            >
              确认
            </div>,
          ]}
        >
          通讯录
        </NavBar>
        <div style={{ flex: 1, height: '100%', overflowY: 'auto' }}>
          <div className={styles.area}>
            <div className={styles.label}>受理人</div>
            <div className={styles.box}>
              {flowUser &&
                flowUser.map((item, inx) => (
                  <div style={{ width: '30%',display:item.person!==""?'block':'none' }} key={inx}>
                    <CheckboxItem
                      onChange={() => this.onChange(item)}
                      checked={personList.indexOf(item.person) > -1}
                    >
                      {item.personZW}
                    </CheckboxItem>
                  </div>
                ))}
              {allPer &&
                allPer.map((item, inx) => (
                  <div
                    style={{
                      width: '30%',
                    }}
                    key={inx}
                  >
                    <CheckboxItem
                      checked={personList.indexOf(item.enName) > -1}
                      onChange={() => this.onChange(item)}
                      style={{ background: '#fff' }}
                    >
                      {item.zhName}
                    </CheckboxItem>
                  </div>
                ))}
            </div>
            <div className={styles.label}>组织人员</div>
            <div className={styles.box}>
              {perData &&
                perData.map((item, inx) => (
                  <div
                    style={{
                      width: '30%',
                      display: item.zhName.length > 0 ? 'block' :'none'
                    }}
                    key={inx}
                  >
                    <CheckboxItem
                      checked={personList.indexOf(item.enName) > -1}
                      onChange={() => this.onChange(item)}
                      style={{ background: '#fff' }}
                    >
                      {item.zhName}
                    </CheckboxItem>
                  </div>
                ))}
            </div>
          </div>
          <div className={styles.label}>组织</div>
          <div className={styles.area}>
            <List>
              {deptData &&
                index > -1 &&
                deptData[index].map((item, inx) => (
                  <Item
                    key={inx}
                    arrow="horizontal"
                    onClick={() => {
                      this.onQuery(item);
                    }}
                    style={{
                      borderBottom: '1px solid rgba(125,125,125,.1)',
                      background: '#fff'
                    }}
                  >
                    {item.deptName}
                  </Item>
                ))}
            </List>
          </div>
        </div>
        <ActivityIndicator toast text="加载中..." animating={loading} />
      </div>
    );
  }
}
export default connect(({ contacts, detail }) => ({ contacts, detail }))(index);
